import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, Form, Input, Radio, Row, Table} from 'antd';
import Constants from '../../utils/Constants';
import RightConstants from '../../utils/RightConstants';
import RightBox from '../../components/common/rightBox';
import PaymentDetail from '../../components/finance/paymentDetail';
import {download, pageObjGenerator} from '../../utils/commons'

const statusArr = ['删除', '待付款', '已付款', '已拒绝'];
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const R = require("ramda");

const payment = Form.create()(class Payment extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'payment/getListForPage', payload: { ...R.pick(['page', 'size'], Constants.DEFAULT_PAGE) } });
    }

    handleOpen = (disabled, id, receiver, batchFlag) => {
        this.fetchPaymentDetail(id);
        if (!disabled) this.props.dispatch({ type: 'history/queryPayment', payload: { receiver } }); //付款银行信息下拉
        this.paymentDetail.handleOpen({ disabled, batchFlag });
    }

    fetchPaymentDetail = (id) => {
        this.props.dispatch({
            type: 'payment/getPaymentById',
            payload: { id }
        });
        this.props.dispatch({   //应付
            type: 'payment/getVerificatedByPaymentId',
            payload: {
                paymentId: id,
                type: 0,
                ...R.pick(['page', 'size'], Constants.DEFAULT_PAGE)
            }
        });
        this.props.dispatch({   //应收
            type: 'payment/getVerificatedByPaymentId',
            payload: {
                paymentId: id,
                type: 1,
                ...R.pick(['page', 'size'], Constants.DEFAULT_PAGE)
            }
        });
        this.props.dispatch({   //手续费
            type: 'payment/getVerificatedByPaymentId',
            payload: {
                paymentId: id,
                type: 2,
                ...R.pick(['page', 'size'], Constants.DEFAULT_PAGE)
            }
        });
    }

    handleSearch = (flag) => {
        let values = this.props.form.getFieldsValue();
        let newPage = R.pick(['page', 'size'], this.props.payment.page);
        if (flag) newPage.page = 1;
        this.props.dispatch({
            type: 'payment/getListForPage',
            payload: {
                ...values,
                ...newPage
            }
        });
    };

    handleExport = (paymentId) => {
        let url = apiPath.mc + "/api/payment/generate";
        download(url, { paymentId });
    }

    columns = [
        { title: '流水号', dataIndex: 'seqNo', key: 'seqNo' },
        { title: '凭证编号', dataIndex: 'selfNo', key: 'selfNo' },
        { title: '供应商名称', dataIndex: 'receiver', key: 'receiver' },
        { title: '收款银行', dataIndex: 'bank', key: 'bank' },
        { title: '收款账号', dataIndex: 'account', key: 'account' },
        { title: '核销金额(CNY)', dataIndex: 'amount', key: 'amount' },
        { title: '申请人', dataIndex: 'creatorName', key: 'creatorName' },
        { title: '申请时间', dataIndex: 'createtime', key: 'createtime' },
        { title: '付款人', dataIndex: 'payerName', key: 'payerName' },
        { title: '付款时间', dataIndex: 'payDate', key: 'payDate' },
        { title: '来源', key: 'batchFlag', render: (text, record, index) => record.batchFlag === '1' ? '月结' : '单票' },
        { title: '状态', key: 'status', render: (text, record, index) => statusArr[record.status] },
        {
            title: '操作',
            render: (record) => {
                let approvalLink = <RightBox resource={RightConstants.FINANCE.FINANCE_PAYMENT_APPROVAL} split={true}><a href="#" onClick={this.handleOpen.bind(this, false, record.id, record.receiver, record.batchFlag === '1')}>审核</a></RightBox>
                let viewLink = <a href="#" onClick={this.handleOpen.bind(this, true, record.id, undefined, record.batchFlag === '1')}>查看</a>
                let gennerate = <RightBox resource={RightConstants.FINANCE.FINANCE_PAYMENT_EXPORT} split={true}><a href="#" onClick={this.handleExport.bind(this, record.id)}>导出</a></RightBox>
                gennerate = (record.status === '2' || record.status === '1') ? gennerate : null;
                return <span>{record.status === '1' ? approvalLink : null}{gennerate}{viewLink}</span>
            }
        }
    ];

    render() {
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
        const { getFieldDecorator } = this.props.form;
        let pagination = pageObjGenerator(this.props.payment.page, 'payment/getListForPage', this.props.form.getFieldsValue(), this.props.dispatch);

        return (
            <div>
                <Row>
                    <Col span={8}><FormItem {...formItemLayout} label={'供应商名称'}>{getFieldDecorator('receiver')(<Input />)}</FormItem></Col>
                    <Col span={8}><FormItem {...formItemLayout} label={'凭证编号'}>{getFieldDecorator('selfNo')(<Input />)}</FormItem></Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <FormItem {...formItemLayout} label={'状态'}>
                            {getFieldDecorator('status', {
                                initialValue: ""
                            })(
                                <RadioGroup style={{ width: 800 }} >
                                    <Radio value="">全部</Radio>
                                    <Radio value="1">待付款</Radio>
                                    <Radio value="2">已付款</Radio>
                                    <Radio value="3">已拒绝</Radio>
                                </RadioGroup>
                                )}
                        </FormItem>
                    </Col>
                    <Col span={7} style={{ float: 'right' }}>
                        <Button type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this, true)}>查询</Button>
                    </Col>
                </Row>
                <Table loading={this.props.loading} rowKey='id' dataSource={this.props.payment.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} />
                <PaymentDetail wrappedComponentRef={(inst) => this.paymentDetail = inst} fetchPaymentDetail={this.fetchPaymentDetail} refreshList={this.handleSearch} />
            </div>
        );
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.payment, payment: state.payment
    };
}

export default connect(mapStateToProps)(payment);
